<template>
	<view class="bg" style="width:100%;
	overflow-x:hidden;">
        <view class="tops">
            <div class="top_title">
                <image class="back" src="https://oa.yuxiang123.cn/uploads/fanhui.svg" mode="aspectFill"  @click="back(0)" ></image>
                <text  style="font-size: 30rpx;">套餐充值</text>
            </div>
            
            <scroll-view class="bottom-box" scroll-x="true" @scroll="scrolls">
                <view  scroll-x="true" :class="activeI === index ? 'vip-pay' : 'vip-nopay'" v-for="(item, index) in moneyList" :key="index">
                    <view class="font-24">{{ item.typeName }}</view>
                    <view class="font-50 font-bold padding-tb-16">{{ item.sm }}</view>
                    <view class="font-25">{{ item.remark }}</view>
                </view>
                
            </scroll-view>
            <view>
                <view style="font-size: 36rpx;padding-top: 30rpx;padding-left: 40rpx;color: #000;font-weight: 600;">
                    套餐内容
                </view>
                <view class="button">
                    <view class="button_n" >
                        <img src="https://oa.yuxiang123.cn/uploads/xcx_img/vip_3.png"   mode="widthFix" style="width: 50%;" @click="toPages('/subone/user/question_task?list_show=1',false)">
                        <view v-if="activeI == 1">自己上传内容</view>
                        <view v-else>平台创作文案</view>
                    </view>
                    <view  class="button_n">
                        <img src="https://oa.yuxiang123.cn/uploads/xcx_img/vip_2.png" @click="toPages('/subone/user/question_task?list_show=2',false)"  mode="widthFix" style="width: 50%;">
                        <view v-if="activeI == 1">自己制作图片</view>
                        <view v-else>平台制作图片</view>
                    </view>
                    <view class="button_n">
                        <img src="https://oa.yuxiang123.cn/uploads/xcx_img/vip_1.png" @click="toPages('/subone/user/question_task?list_show=3',false)"  mode="widthFix" style="width: 50%;">
                        <view>素人代发布</view>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view style="font-size: 36rpx;padding-top: 30rpx;padding-left: 40rpx;color: #000;font-weight: 600;">
                小红书发帖(套餐)
            </view>
            <view style="display: flex;flex-wrap: wrap;">
               
                <view v-if="activeI == 0" class="tc" :class="(price==item.price && type == 1)?'ass':''"  @click="dianji(item)"  v-for="(item, index) in rechargeList2" :key="index">
                    <view class="jg" >{{item.title}}条</view>
                    <view class="nr" >¥{{item.price}}</view>
                </view>
                <view v-if="activeI == 1" class="tc" :class="(price==item.price && type == 1)?'ass':''"  @click="dianji(item)"  v-for="(item, index) in rechargeList1" :key="index">
                    <view class="jg" >{{item.title}}条</view>
                    <view class="nr" >¥{{item.price}}</view>
                </view>
                <view v-if="activeI == 2" class="tc" :class="(price==item.price && type == 1)?'ass':''"  @click="dianji(item)"  v-for="(item, index) in rechargeList3" :key="index">
                    <view class="jg" >每日{{item.title}}条</view>
                    <view class="nr" >¥{{item.price}}</view>
                </view>
               
            </view>
        </view>
        <!-- <view>
            <view style="font-size: 36rpx;padding-top: 30rpx;padding-left: 40rpx;color: #000;font-weight: 600;">
                小红书评论(套餐)
            </view>
            <view style="display: flex;flex-wrap: wrap;">
                <view  class="tc" :class="(price==item.price && type == 2)?'ass':''"  @click="commendianji(item)"  v-for="(item, index) in commentList" :key="index">
                    <view class="jg" >{{item.title}}条</view>
                    <view class="nr" >¥{{item.price}}</view>
                </view>
            </view>
        </view> -->
        <view class="rech" @click="queding(1)">立即开通</view>

        <view class="attention">
            <view >注意事项</view>
            <view >1.仅限通过微信充值</view>
            <view >2.充值可送相对应AI使用次数(每充值5元送1次AI次数)</view>
            <view >3.发起任务后，系统会冻结对应的套餐次数，等待任务实际完成后，系统会做最终结算</view>
            <view >4.您所充值购买的素人广告服务包，仅可用于素人投放，不可提现或转赠</view>
        </view>
        <view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus:true,
                activeI:0,
                commentList:[{
                    title:'135',
                    price:'200',
                },{
                    title:'400',
                    price:'500',
                },{
                    title:'1000',
                    price:'1000',
                }],
                rechargeList1:[{
                    title:'30',
                    price:'200',
                },{
                    title:'80',
                    price:'500',
                },{
                    title:'168',
                    price:'1000',
                },{
                    title:'350',
                    price:'2000',
                },{
                    title:'900',
                    price:'5000',
                },{
                    title:'2000',
                    price:'10000',
                }],
                rechargeList2:[{
                    title:'15',
                    price:'500',
                },{
                    title:'40',
                    price:'1000',
                },{
                    title:'90',
                    price:'2000',
                },{
                    title:'240',
                    price:'5000',
                },{
                    title:'500',
                    price:'10000',
                }],
                rechargeList3:[{
                    title:'10',
                    price:'4500',
                },{
                    title:'20',
                    price:'8500',
                }],
                moneyList:[{
                    typeName:'素人种草代运营',
                    sm:'套餐包',
                    remark:'平台全托管，无须自己操作',
                },{
                    typeName:'素人种草',
                    sm:'套餐包',
                    remark:'自行准备图文素材，成本低',
                }],
				isTextPopup:false,
                shop:[],
                price:500,
                num:15,
                type:1,
                freight:'',
                order_id:0,
                code:''
			}
		},
		onLoad(e) {
            if(e.id){
                this.order_id = e.id;
            }
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onShow() {
            this.getShop();
            // #ifdef MP-WEIXIN
			this.up_code();
			// #endif
		},
		methods: {
            back:function(type){
                    uni.navigateBack();
            },
            commendianji(item){
                this.price=item.price;
                this.num=item.title;
                this.type = 2;
            },
            dianji(item){
                this.price=item.price;
                this.num=item.title;
                this.type=1;
            },
            scrolls(e){
                var scrollWidth = e.detail.scrollWidth;
                if(this.moneyList.length == 3){
                    if(e.detail.scrollLeft < scrollWidth/4){
                        this.activeI = 0;
                        if(this.type == 1){
                            this.price = 500;
                            this.num = 15;
                        }
                        var that = this;
                        setTimeout(function () {
                            if(that.moneyList.length == 3){
                                that.moneyList.pop();
                            }
                        }, 400);
                        
                    }else if(e.detail.scrollLeft > scrollWidth/4  && e.detail.scrollLeft < scrollWidth/2){
                        this.activeI = 1;
                        if(this.type == 1){
                            this.price = 200;
                            this.num = 30;
                        }
                        var that = this;
                        setTimeout(function () {
                            if(that.moneyList.length < 3){
                                that.moneyList.push({
                                    typeName:'素人种草月包',
                                    sm:'月包',
                                    remark:'平台全托管，无须自己操作',
                                })
                            }
                        }, 400);
                        
                    }else{
                        this.activeI = 2;
                        if(this.type == 1){
                            this.price = 4500;
                            this.num = 10;
                        }
                    }
                }else{
                    if(e.detail.scrollLeft < scrollWidth/3){
                        this.activeI = 0;
                        if(this.type == 1){
                            this.price = 500;
                            this.num = 15;
                        }
                        if(this.moneyList.length == 3){
                            this.moneyList.pop();
                        }
                        
                    }else if(e.detail.scrollLeft > scrollWidth/3  && e.detail.scrollLeft < scrollWidth/2){
                        this.activeI = 1;
                        if(this.type == 1){
                            this.price = 200;
                            this.num = 30;
                        }
                        var that = this;
                        setTimeout(function () {
                            if(that.moneyList.length < 3){
                                that.moneyList.push({
                                    typeName:'素人种草月包',
                                    sm:'月包',
                                    remark:'平台全托管，无须自己操作',
                                })
                            }
                        }, 500);
                        
                    }
                }
                
            },
            
            handleClick(item,index){
                this.activeI = index;
            },
            up_code(){
                var that = this;
                uni.login({
                    provider: 'weixin', 
                    success: function (res) {
                        that.code = res.code;
                    }
                });
            },
            queding(type){
                var that = this;
              
                if(type == 2){
                    var price = this.freight;
                }else{
                    var price = this.price;
                }
                if(price < 200){
                    that.$Toast('单次充值金额不可低于200元');
                    return false;
                }
                if(that.order_id){
                    that.prepay(that.order_id,that.code,price);
                }else{
                    uni.request({
                        url: 'https://shop.yuxiang123.cn/api/pay/create_shop_order',
                        header: {"content-type": "application/x-www-form-urlencoded"},
                        method: 'POST',
                        data:{
                            token:uni.getStorageSync('token'),
                            shop_id:that.shop.id,
                            price:price,
                            activeI:that.activeI,
                            num:that.num,
                            type:that.type
                        },
                        success: (reset) => {
                            if(reset.data.code == 1){
                                that.order_id=reset.data.data.id;
                                that.prepay(reset.data.data.id,that.code,price);
                            }else{
                                that.$Toast(reset.data.msg);
                            }
                        }
                    })
                }
                
            },
            getShop(){
                var that = this;
                uni.request({
                    url: 'https://oa.yuxiang123.cn/api/shop/getShop',
                    header: {"content-type": "application/x-www-form-urlencoded"},
                    method: 'POST',
                    data:{
                        token:uni.getStorageSync('token')
                    },
                    success: (reset) => {
                        if(reset.data.code == 1){
                            that.shop=reset.data.data;
                        }else{
                            that.$Toast(reset.data.msg);
                        }
                    }
                })
            },
            prepay(order_id,code,price){
				this.isTextPopup = false;
				var that = this;
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:price,
					payment: 'wechat',
					shop_id:that.userInfo.shop_id
				};
				// #ifdef APP-PLUS
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:price,
					payment: 'wechat',
					platform: 'App',
					shop_id:that.shop.id
				};
				// #endif
				uni.request({
					url: 'https://shop.yuxiang123.cn/api/pay/shop_prepay',
					header: {"content-type": "application/x-www-form-urlencoded"},
					method: 'POST',
					data:data,
					success: (res) => {
                        if(res.data.code == 0){
                            this.$Toast(res.data.msg);
                            if(res.data.msg == '订单支付金额错误'){
                                setTimeout(function () {
                                    uni.switchTab({
                                        url:'/pages/order/orderList'
                                    });
                                }, 800);
                            }
                            return false;
                        }
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							timeStamp: res.data.data.pay_data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.data.pay_data.nonceStr, // 随机字符串
							package: res.data.data.pay_data.package, // 固定值
							signType: res.data.data.pay_data.signType, //固定值
							paySign: res.data.data.pay_data.paySign, //签名
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							orderInfo: res.data.data.pay_data, //微信订单数据(官方说是string。实测为object)
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
					}
				})
			},
			setMessage(res,type){
				var that = this;
				uni.request({
					url:'https://oa.yuxiang123.cn/api/index/addLog',
					method:'POST',
					header:{"content-type":"application/x-www-form-urlencoded"},
					data:{'content':'支付完成','type':type,'res':res},
				})
                this.up_code();
				if(type == 1){
                    this.order_id = 0;
					this.$Toast('充值成功');
                    this.getShop();
				}else{
					this.$Toast('支付失败');
                    //跳转
                    uni.switchTab({
                        url:'/pages/order/orderList'
                    });
				}
				
			},
            href:function(url){
                if(url!=''){
                    uni.navigateTo({
                        url:url
                    });
                }
            },
		}
	}
</script>

<style lang="scss">
    .jg{
        font-size: 36rpx;margin: 26rpx 0 15rpx 0;
    }
    .nr{
        font-size: 34rpx;
    }
    .font-24{
        font-size: 38rpx;
        font-weight: 550;
        margin-left: 50rpx;
    }
    .font-25{
        margin-left: 50rpx;
        font-size: 26rpx;
        margin-top: 20rpx;
        color: #F9DEAA;
    }
    .font-50{
        font-size: 52rpx;
        font-weight: 600;
        margin-left: 50rpx;
    }
    .bottom-box {
		padding: 0 30rpx;
		white-space: nowrap;
		.vip-pay {
			color: #F9DEAA;
			display: inline-block;
			padding-top: 50rpx;
			width: 88%;
			height: 220rpx;
			margin-right: 30rpx;
			background-image: url('https://oa.yuxiang123.cn/uploads/xcx_img/vip_kp.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.delete {
				text-decoration: line-through;
			}
		}
		.vip-nopay {
			color: #F9DEAA;
			display: inline-block;
			padding-top: 50rpx;
			width: 88%;
			height: 220rpx;
			margin-right: 30rpx;
			background-image: url('https://oa.yuxiang123.cn/uploads/xcx_img/vip_kp.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.delete {
				color: #F9DEAA;
				text-decoration: line-through;
			}
		}
	}


.textPopup{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	.textPopup_box{
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 20upx;
		padding: 20upx;
		.textPopup_box_title{
			padding: 20rpx;
			text-align: center;
			font-size: 36upx;
		}
		.textPopup_box_input{
			input{
				padding:20upx;
				font-size:32upx;
				background-color: #f0f0f0;
				border-radius: 6upx;
			}
		}
		.textPopup_box_btn{
			display: flex;
			align-items: center;
			.textPopup_box_btn_box{
				flex: 1;
				text-align: center;
				padding: 30upx 0;
				font-size:36upx;
			}
		}
	}
}
.rech{
    width: 90%;
    margin-left: 5%;
    height: 80rpx;
    background-color: #3B4158;
    text-align: center;
    line-height: 80rpx;
    color: #F9DEAA;
    font-size: 36rpx;
    margin-top: 100rpx;
    border-radius: 50rpx;
}
.attention{
    background-color: #F2F9FD;
    margin-top: 60rpx;
    padding: 5%;
    color: #999;
    font-size: 26rpx;
    line-height: 45rpx;
    width: 82%;
    margin-left: 4%;
    border-radius: 30rpx;
}
.tc{
    text-align: center;
    width: 29%;
    height: 150rpx;
    font-weight: 600;
    border: 1rpx solid #555353;
    margin-left: 3%;
    border-radius: 40rpx;
    margin-top: 35rpx;
}
.ass{
    border: 1px solid #E3CA9F !important;
    background-color: #FBF9F3;
    color:#654D27 !important;
}
.bann-but{
    position: absolute;
    right: 75rpx;
    margin-top: -45rpx;
    background: #fff;
    width: 170rpx;
    color: #31D1C9;
    height: 55rpx;
    border-radius: 30rpx;
    text-align: center;
    line-height: 55rpx;
}
.bann-price{
    color: #fff;
    padding-left: 40rpx;
    padding-top: 40rpx;
    font-size: 44rpx;
}
.bann-tit{
    color: #fff;
    font-size: 36rpx;
    padding-top: 30rpx;
    padding-left: 40rpx;
}
.bann{
    width: 94%;
    height: 240rpx;
    margin-left: 3%;
    margin-top: 20rpx;
    border-radius: 20rpx;
    background-image: linear-gradient(to right, #31D1C9, #8DA9FF);
}
.tops{
    background-image: url('https://oa.yuxiang123.cn/uploads/xcx_img/vip_bj.png');
    background-repeat: round;
    padding-bottom: 60rpx;
}
.top_title{
    width: 100%;
    height: 50rpx;
    padding-top: 100rpx;
    padding-bottom: 15rpx;
    text-align: center;
}

.back{
    position: absolute;
    left: 25rpx;
    width: 45rpx;
    height: 45rpx;
}
.button{
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
    width: 92%;
    background: #fff;
    margin-left: 4%;
    border-radius: 30rpx;
}
.button_n{
	width: 31%;
	height: 180rpx;
	margin-left: 1.5%;
	border-radius: 10px;
	opacity: 1;
	background: #FFFFFF;
	text-align: center;
	padding-top: 5%;
}


</style>
